<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="/web/ui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/web/ui/css/public.css" media="all">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
    <script src="/web/js/vue2.js"></script>
    <script src="/web/js/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <div class="tools-div">
            <el-button type="success" icon="el-icon-plus" size="mini" @click="handleSave">添 加</el-button>
        </div>
        <el-table
                id="munu-table"
                :data="list"
                style="width: 100%"
                row-key="id"
                border
                lazy
                :tree-props="{children: 'child', hasChildren: 'pid===0'}">
            <el-table-column
                    prop="title"
                    label="菜单名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="href"
                    label="菜单路径">
            </el-table-column>
            <el-table-column
                    prop="icon"
                    label="菜单图标">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 嵌套表单-->
        <el-dialog title="添加/编辑 菜单" :visible.sync="dialogFormVisible">
            <el-form :model="form" >
                <el-form-item label="菜单名称" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单路径" :label-width="formLabelWidth">
                    <el-input v-model="form.href" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" :label-width="formLabelWidth">
                    <el-input v-model="form.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父菜单" :label-width="formLabelWidth">
                    <el-select v-model="getPTitle" placeholder="请选择"  >
                        <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id" v-if="item.id!==form.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialogForm">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/web/ui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/web/ui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>


    const vm = new Vue({
        el: "#app",
        data() {
            return {
                list: [],
                // 嵌套表单
                dialogFormVisible: false,
                formLabelWidth: '120px',
                form: {
                    title: "",
                    href: "",
                    icon: "",
                    id: "",
                    pid: ""
                },
                options: [],
            }
        },
        mounted() {
            axios.get("/menu/list")
                .then(res => {
                    this.list = res.data.data;
                    this.options.push({id:0, title: "无父菜单"});
                    for (let l of this.list) {
                        if (l.pid===0) this.options.push(l);
                    }
                })
        },
        methods: {
            checkTitle() {
                return this.form.title && this.form.pid>=0;
            },
            closeDialogForm() {
                this.dialogFormVisible = false;
                this.form.title="";
                this.form.href="";
                this.form.icon="";
                this.form.pid="";
            },
            saveOrUpdate() {
                if (this.checkTitle()) {
                    if (this.form.id) {
                        this.edit();
                    } else this.save();
                } else this.$message.error('菜单名称、父菜单名称 不可为空~');
            },
            // index：索引；data：整行数据对象
            handleEdit(index, data) {
                this.dialogFormVisible = true;
                this.form.id = data.id
                this.form.title = data.title;
                this.form.href = data.href;
                this.form.icon = data.icon;
                this.form.pid = data.pid;
            },
            // 执行删除操作
            async handleDelete(index, data) {
                await this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { // promise
                    // 点击确定，远程调用ajax
                    axios.post("/menu/remove?id=" + data.id)
                }).then((response) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    // 刷新父页面的父页面【顶层页面】
                    window.parent.parent.location.reload();
                }).catch(() => {
                    this.$message.info('取消删除')
                })
            },
            // 执行修改操作
            async edit() {
                // console.log(this.form);
                await axios.post("/menu/update", {
                    id: this.form.id,
                    title: this.form.title,
                    href: this.form.href,
                    icon: this.form.icon,
                    pid: this.form.pid
                })
                    .then(res => {
                        if (res.data.code === 0) {
                        }
                    });
                // 关闭菜单
                this.closeDialogForm()
                // 刷新父页面的父页面【顶层页面】
                window.parent.parent.location.reload();
            },
            handleSave() {
                this.dialogFormVisible = true;
            },
            // 添加
            async save() {
                // console.log(this.form);
                await axios.post("/menu/save", {
                    title: this.form.title,
                    href: this.form.href,
                    icon: this.form.icon,
                    pid: this.form.pid,
                })
                    .then(res => {
                        if (res.data.code === 0) {
                        }
                    });
                // 关闭菜单
                this.closeDialogForm();
                // 刷新父页面的父页面【顶层页面】
                window.parent.parent.location.reload();
            }
        },
        computed: {
            getPTitle: {
                get() {
                    for (let o of this.options) {
                        if (o.id === this.form.pid) return o.title;
                    }
                    return "";
                },
                set(pid) {
                    for (let o of this.options) {
                        if (o.id===pid) this.form.pid = o.id;
                    }
                }
            }
        }
    })

</script>
</body>
</html>